<template>
  <div class="hero-page bg-light-2" v-if="model">
   <div class="topbar bg-black py-2 px-3 d-flex text-white ai-center">
       <img src="../assets/logo.png" height="30" alt="logo">
       <div class="px-2 flex-1">
           <span>王者荣耀</span>
           <span class="ml-2">攻略战</span>
       </div>
       <router-link class="" to='/' tag="div">更多英雄&gt;</router-link>
    </div>
    
    <div class="top" :style="{'background-image':`url(${model.banner})`}">
      <div class="info text-white p-3 h-100 d-flex flex-column jc-end">
        <div>{{model.title}}</div>
        <h2 class="my-2">{{model.name}}</h2>
        <div>{{model.categories.map(v=> v.name).join('/')}}</div>
        <div class="d-flex jc-between">
           <div class="scores" v-if="model.scores">
              <span>难度</span>
              <span class="badge" style="background-color:#805300;">{{model.scores.difficult}}</span>
              <span>技能</span>
              <span class="badge" style="background-color:#1f3695;">{{model.scores.skills}}</span>
              <span>攻击</span>
              <span class="badge" style="background-color:#7a1a17;">{{model.scores.attack}}</span>
              <span>生存</span>
              <span class="badge" style="background-color:#33332c;">{{model.scores.survive}}</span>
            </div>
            <span class="text-grey">皮肤：6 &gt;</span>
          </div>
        </div>
    </div>
    <!-- end of top -->
    <div>
      <div>
        <div class="nav border-bottom pt-3 pb-2 jc-around bg-white">
          <div class="nav-item active">
            <div class="nav-link">英雄初识</div>
          </div>
           <div class="nav-item">
            <div class="nav-link">进阶攻略</div>
          </div>
        </div>
        <swiper>
          <swiper-slide>
            <div>
              <div class="p-3 border-bottom bg-white">
                <div class="d-flex">
                  <router-link tag="button" to="/" class="btn btn-lg py-2 flex-1">英雄介绍视频</router-link>
                  <router-link tag="button" to="/" class="btn btn-lg py-2 ml-2 flex-1">一图识英雄</router-link>
                </div>
                <div class="mt-4 skills">
                  <div class="d-flex jc-around">
                    <img :src="item.icon" alt="item.name" v-for="(item,i) in model.skills" :key="i" 
                    :class="{active : currentSkillIndex === i}" @click="currentSkillIndex = i" height="60" width="60">
                  </div>
                </div>
                <div v-if="currentSkill">
                  <div class="d-flex  pt-4 pd-2">
                     <h3 class="m-0">{{currentSkill.name}}</h3>
                     <span class="ml-3 text-grey-1 fs-sm">(冷却值：{{currentSkill.delay}} 消耗：{{currentSkill.cost}})</span>
                  </div>
                  <p>{{currentSkill.description}}</p>
                  <div class="border-bottom"></div>
                  <p class="text-grey-1">小提示:{{currentSkill.tips}}</p>
                </div>
              </div>

              <m-card plain icon="" title="出装推荐">
                <div class="fs-xl pb-3">顺风出装</div>
                <div class="d-flex jc-around">
                  <div v-for="item in model.items1" :key="item.name">
                    <img class="icon" :src="item.icon" :alt="item.name">
                    <div class="text-center">{{item.name}}</div>
                  </div>
                </div>
                <div class="border-bottom mt-3"></div>
                <div class="fs-xl py-3">逆风出装</div>
                <div class="d-flex jc-around">
                  <div v-for="item in model.items2" :key="item.name">
                    <img class="icon" :src="item.icon" :alt="item.name">
                    <div class="text-center">{{item.name}}</div>
                  </div>
                </div>
              </m-card>
              <m-card plain icon="" title="使用技巧">
                <p class="mt-0">{{model.usageTips}}</p>
              </m-card>
              <m-card plain icon="" title="对抗技巧">
                <p class="mt-0">{{model.battleTips}}</p>
              </m-card>
              <m-card plain icon="" title="团战思路">
                <p class="mt-0">{{model.teamTips}}</p>
              </m-card>
               <m-card plain icon="" title="英雄关系">
                <div class="fs-xl">最佳拍档</div>
                <div v-for="item in model.partners" :key="item.name" class="d-flex pt-3">
                  <img :src="item.hero.avatar" alt="" class="hero-icon">
                  <div class="flex-1 ml-2">{{item.description}}</div>
                </div>
              </m-card>
            </div>
          </swiper-slide>
          <swiper-slide>

          </swiper-slide>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    id:{required:true}
  },
  data(){
    return{
      model:null,
      currentSkillIndex:0
    }
  },
  computed:{
    currentSkill(){
      return this.model.skills[this.currentSkillIndex]
    }
  },
  methods:{
    async fetch(){
      const res = await this.$http.get(`heroes/${this.id}`)
      this.model = res.data
    }
  } ,
  created(){
    this.fetch()
  }
}
</script>

<style lang="scss">
@import '../assets/scss/_variables';
.hero-page{
  .top{
    height: 50vw;
    background: #fff no-repeat top center;  
    background-size:auto  100%;

    .info{
      background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));
      .badge{
        display: inline-block;
        margin: 0 .25rem;
        height: 1rem;
        width: 1rem;
        line-height: 1.05rem;
        text-align: center;
        border-radius: 50%;
        font-size: .75rem;
        border:1px solid rgba(255,255,255,.3) ;
      }
    }
  }
  .skills{
    img{
      &.active{
      border-color: map-get($colors, 'primary');
      }
      border: 3px solid map-get($colors, 'white');
      border-radius: 45%;
    }
  }
  img{
    width: 4rem;
    height: 4rem;
    &.icon{
      border-radius: 50%;
    }
    &.hero-icon{
      border-radius: 4px;
    }
  }
}
</style>